<template>
    <view class="member">
        <view class="mbg" :style="'background-image: url(' + imgUrl + '/static/images/merber/bbg.png' + ')'">
            <view class="mbg-img" :style="'background-image: url(' + memberData.bg_image + ')'">
                <view class="mbg-img-text">
                    <text class="mbg-img-text1">{{ memberData.name }}</text>
                    <text class="mbg-img-text2">{{ memberData.vip_code || "00000000" }}</text>
                    <text class="mbg-img-text3">还需消费{{ memberData.remain_money }}元成为黄金会员</text>
                </view>
                <view class="mbg-img-progress">
                    <uv-line-progress :percentage="(memberData.money / memberData.remain_money) * 100"
                        activeColor="#fff" height="4" inactiveColor="#F4F4F8" :showText="false"></uv-line-progress>
                </view>
            </view>
            <image class="abg" :src="imgUrl + 'static/images/merber/abg.png'" mode="widthFix" />
            <view class="mcontent-title">我的权益</view>
        </view>
        <view class="mcontent">
            <view class="mcontent-item" v-for="(item, index) in memberData.json" :key="index">
                <image class="mcontent-item-img" :src="item.image" mode="scaleToFill"
                    @click="goto(memberData.id, index)" />
                <view class="mcontent-item-text">{{ item.name }}</view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    name: "member",
    mixins: [],
    props: {},
    data() {
        return {
            imgUrl: this.$imgUrl || "",
            // 判断会员等级
            level: 1,
            memberData: {},
        };
    },
    computed: {},
    watch: {},
    onLoad(options) {
        // 获取当前会员等级
        this.getMemberLevel();
    },
    onShow() { },
    mounted() { },
    methods: {
        leftClick() {
            uni.navigateBack();
        },
        goto(id, index) {
            console.log(id, index);
            uni.navigateTo({
                url: "/pages/user/member/membership?id=" + id + "&memberEquity=" + index,
            });
        },
        //跳转
        jump(url) {
            uni.navigateTo({
                url: url,
            });
        },
        // 获取当前会员等级
        getMemberLevel() {
            uni.request({
                url: "/increased.Vip/GetUserVipLevel",
                method: "POST",
                success: (res) => {
                    this.memberData = res.res.data;
                    console.log(res.res.data);
                },
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.member {
    width: 100%;
    height: 100vh;

    .mbg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        width: 100%;
        height: 550rpx;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: relative;

        .mbg-img {
            width: 90%;
            height: 334rpx;
            margin: 0 auto;
            background-size: 100% 100%;
            position: relative;

            .mbg-img-progress {
                position: absolute;
                top: 55%;
                left: 6%;
                z-index: 0;
                width: 40%;
            }

            .mbg-img-text {
                padding: 40rpx;

                .mbg-img-text1 {
                    display: block;
                    font-family: Source Han Sans CN;
                    font-weight: bold;
                    font-size: 48rpx;
                    color: #313541;
                }

                .hj {
                    color: #5a4231;
                }

                .zs {
                    color: #1e6ddc;
                }

                .mbg-img-text2 {
                    display: block;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #909aba;
                    margin: 20rpx 0;
                }

                .mbg-img-text3 {
                    display: block;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #98a3c0;
                    margin-top: 55rpx;
                }

                .zs-text {
                    color: #61afff;
                }

                .hj-text {
                    color: #887852;
                }
            }
        }

        .abg {
            width: 100%;
            position: absolute;
            bottom: -1rpx;
        }

        .mcontent-title {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 20rpx;

            z-index: 1;
        }
    }

    .mcontent {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        // justify-content: space-between;
        // margin: 0 auto;
        .mcontent-item {
            width: 30%;
            text-align: center;
            margin-top: 30rpx;

            &:nth-child(3n) {
                margin-right: 0;
            }

            margin-right: 20rpx;

            .mcontent-item-img {
                width: 98rpx;
                height: 98rpx;
            }

            .mcontent-item-text {
                display: block;
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 24rpx;
                color: #252525;
                margin-top: 20rpx;
            }
        }
    }
}
</style>
